<template>
<div id="app">
  <div class="main">
    <!-- 顶部组件 -->
    <header01 v-if="$route.meta.headerNav"></header01>
    <!-- 路由视图 -->
    <router-view @get-player-id="getPlayerId" @get-play-all-id="getPlayAllId" :history-play="historyPlay" @emptyhistory="emptyhistory"></router-view>
    <!-- 播放器视图 -->
    <player :player-id="playerId" v-show="playerId" :list-id="listId" @get-player-id="getPlayerId" @get-history-play="getHistoryPlay"></player>
  </div>
</div>
</template>
<script>
import header01 from './components/header.vue'
import player from './components/player.vue'
import {getSongDetail} from './api/base.js'
export default {
  data() {
    return {
      playerId:null,
      listId:null,
      historyPlay:[]
    }
  },
  components:{
    header01,
    player
  },
  methods: {
    getPlayerId(id){
          console.log("歌曲id：",id);
          this.playerId = id;
          this.getSongDetailFun(id);
        },
    getPlayAllId(id){
      console.log("歌单id：",id);
      this.listId = id;
    },
    getHistoryPlay(value){
      this.historyPlay.push(value);
      console.log(this.historyPlay);
    },
    emptyhistory(){
      this.historyPlay = []
      console.log(this.historyPlay);
    },
    getSongDetailFun(id){
      getSongDetail({ids:id}).then(data=>{
        // this.SongDetail = data.songs[0];
                    let index = this.historyPlay.findIndex((item) => item.id == data.songs[0].id);
                    // console.log(index);
                    if(index == "-1"){
                        this.historyPlay.push(data.songs[0]);                        
                    }
      })
    },
    
  },
}
</script>
<style lang="less">
@import "~@/assets/css/base.css";
</style>
